{% extends "admin_base.html" %}
{% block pageContent %}
    <form enctype="multipart/form-data" method="POST">
    <table>
    {{ form.as_table }}
    <tr>
        <th>&nbsp;</th>
        <td>
            {% ifequal action "update" %}
            <input id="submitButton" type="submit" value="Update" />
            {% else %}
            <input id="submitButton" type="submit" value="Create" />
            {% endifequal %}
            <input id="cancelButton" type="button" value="Cancel" onclick="history.back();" />
        </td>
    </tr>
    </table>
    </form>
    <div id="avatarPreviewPanel"><div id="avatarPreview"></div></div>
    <script type="text/javascript" >
        var element, cp, previewPanel;
        $(document).ready(function() {
            $("#id_outfit_color, #id_hair_color, #id_skin_tone_fill, #id_skin_tone_outline, #id_background_color").each(
                function(index, element) {
                    var colorPickerImage = $(document.createElement('div'));
                    colorPickerImage.addClass('colorPickerButton');
                    $(element).addClass('color');
                    colorPickerImage.insertAfter(element);
                    colorPickerImage.ColorPicker({
                        onSubmit: function(hsb, hex, rgb) {
                            $(element).val(hex);
                            $(element).ColorPickerHide();
                        }
                    });
                }
            );
            $('#avatarPreviewPanel').dialog({
                title: 'Avatar Preview',
                resizable: false,
                modal: false,
                height: 300,
                width: 275,
                position: ['right', 'top'],
                buttons: { 
                    "Refresh": updateAvatarPreview
                }
            });
            updateAvatarPreview();
        });
        
        /* 
        ** This function is responsible for getting all of the avatar
        ** data and re-inserting the flash movie with said data to update
        ** the preview.
        */ 
        function updateAvatarPreview() {
            
            // Gather the avatar parameters.
            var flashParameters = {};
            flashParameters.fSex = $('#id_sex').val();
            flashParameters.fMouth = $('#id_mouth_shape').val();
            flashParameters.fAge = $('#id_age').val();
            flashParameters.fOutfit = $('#id_outfit').val();
            flashParameters.fCloth = $('#id_outfit_color').val();
            flashParameters.fNose = $('#id_nose_type').val();
            flashParameters.fHair = $('#id_hair_type').val();
            flashParameters.fHairColor = $('#id_hair_color').val();
            flashParameters.fAccessory1 = $('#id_accessory_1').val();
            flashParameters.fAccessory2 = $('#id_accessory_2').val();
            flashParameters.fAccessory3 = $('#id_accessory_3').val();
            flashParameters.fSkin = $('#id_skin_tone_fill').val();
            flashParameters.fSkinOut = $('#id_skin_tone_outline').val();
            flashParameters.fBkd = $('#id_background_color').val();
            flashParameters.fEnvironment = $('#id_environment').val();
            flashParameters.fWeather = $('#id_weather').val();
            flashParameters.fBubble = $('#id_speech_bubble').val();
            flashParameters.fBubbleText = $('#id_speech_bubble_text').val();
            
            // Insert the flash movie into the preview window.
            swfobject.embedSWF(siteRoot + 'flash/avatar.swf', 'avatarPreview', '200', '200', '9.0.0', '', flashParameters);
        }
    </script>
{% endblock %}